<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue';
  import { addPerson } from '../../../api/system/role';
  import { onMounted, watch } from 'vue';
  import { data } from '../pca/citys';

  onMounted(() => {
    console.log(formValue);
    search();
  });

  let provinces = ref<Array<any>>([]);

  let citys = ref<Array<any>>([]);
  let districts = ref<Array<any>>([]);
  const province = ref('北京市'),
    city = ref(),
    district = ref();
  const search = async () => {
    provinces.value = [];
    data.forEach((Element) => {
      // console.log(Element);

      provinces.value.push({
        label: Element.fullname,
        value: Element.fullname,
        abc: Element.children,
      });
      // console.log(provinces);
    });
    citys.value = [];
    provinces.value.forEach((element) => {
      // console.log(element);
      if (province.value == element.value) {
        // console.log(element.abc);
        element.abc.forEach((v) => {
          citys.value.push({ label: v.fullname, value: v.fullname, def: v.children });
        });
      }
    });
    districts.value = [];
    citys.value.forEach((element) => {
      // console.log(element);
      if (city.value == element.value) {
        // console.log(element);
        element.def.forEach((v) => {
          districts.value.push({ label: v.fullname, value: v.fullname });
        });
      }
    });
    // console.log(provinces);
  };

  watch(province, () => {
    formValue.address = `${province.value}`;
    console.log(formValue);
    search();
  });
  watch(city, () => {
    formValue.address = `${province.value}${city.value}`;
    console.log(formValue);
    search();
  });
  watch(district, () => {
    formValue.address = `${province.value}${city.value}${district.value}`;
    console.log(formValue);
    search();
  });
  const dutyList = [
    {
      label: '行政',
      value: '行政',
    },
    {
      label: '人事',
      value: '人事',
    },
    {
      label: '普通员工',
      value: '普通员工',
    },
  ];

  const orgList = [
    {
      label: '行政',
      value: '行政',
    },
    {
      label: '人事',
      value: '人事',
    },
  ];

  const rules = {
    name: {
      required: true,
      message: '请输入员工姓名',
      trigger: 'blur',
    },
    description: {
      required: true,
      message: '请输入员工描述',
      trigger: 'blur',
    },
    phone: {
      required: true,
      message: '请输入员工电话号码',
      trigger: ['input'],
    },
    address: {
      required: true,
      message: '请输入员工地址',
      trigger: 'blur',
    },
    duty: {
      required: true,
      type: 'string',
      message: '请选择员工职务',
      trigger: 'change',
    },
  };

  const formRef: any = ref(null);
  const defaultValueRef = () => ({
    name: '',
    phone: '',
    description: '',
    sex: '',
    address: '',
    duty: '',
    org: '',
  });

  let formValue = reactive(defaultValueRef());
  console.log(formValue);
  console.log(formValue.address);
  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }
</script>
<template>
  <div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-grid cols="1 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
          <n-form
            :label-width="80"
            :model="formValue"
            :rules="rules"
            label-placement="left"
            ref="formRef"
            class="py-8"
          >
            <n-form-item label="员工姓名" path="name">
              <n-input v-model:value="formValue.name" placeholder="输入姓名" />
            </n-form-item>
            <n-form-item label="员工号码" path="phone">
              <n-input placeholder="电话号码" v-model:value="formValue.phone" />
            </n-form-item>
            <n-form-item>
              <n-select class="flex-1" v-model:value="province" :options="provinces" />
              <n-select class="flex-1" v-model:value="city" :options="citys" />
              <n-select class="flex-1" v-model:value="district" :options="districts" />
            </n-form-item>

            <n-form-item label="员工住址" path="address">
              <n-input placeholder="住址" v-model:value="formValue.address" />
            </n-form-item>

            <n-form-item label="员工职务" path="duty">
              <n-select
                placeholder="请选择员工职务"
                :options="dutyList"
                v-model:value="formValue.duty"
              />
            </n-form-item>
            <n-form-item label="员工所属部门" path="org">
              <n-select
                placeholder="请选择员工所属部门"
                :options="orgList"
                v-model:value="formValue.org"
              />
            </n-form-item>
            <n-form-item label="性别" path="sex">
              <n-radio-group v-model:value="formValue.sex" name="sex">
                <n-space>
                  <n-radio :value="1">男</n-radio>
                  <n-radio :value="2">女</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="员工描述" path="description">
              <n-input
                v-model:value="formValue.description"
                type="textarea"
                placeholder="请输入员工描述"
              />
            </n-form-item>
            <div style="margin-left: 80px">
              <n-space>
                <n-button type="primary" @click="addPerson(formValue)">添加</n-button>
                <n-button @click="resetForm">重置</n-button>
              </n-space>
            </div>
          </n-form>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>
